import React, { Component } from "react";
import "./App.css";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";

export default class App extends Component {
  state = {
    todos: [
      { id: "001", name: "吃饭", done: false },
      { id: "002", name: "睡觉", done: false },
      { id: "003", name: "打代码", done: true },
      { id: "004", name: "抽烟", done: true },
    ],
  };

  addTodo = (todoObj) => {
    const newTodos = [todoObj, ...this.state.todos];
    this.setState({ todos: newTodos });
  };

  changeTodo = (id, checked) => {
    const newTodos = this.state.todos.map((item) => {
      if (item.id === id) {
        return { ...item, done: checked };
      } else {
        return item;
      }
    });

    this.setState({ todos: newTodos });
  };

  deleteTodo = (id) => {
    if (window.confirm("确认删除吗？")) {
      const newTodos = this.state.todos.filter((item) => {
        return item.id !== id;
      });
      this.setState({ todos: newTodos });
    }
  };

  checkAllTodo = (checked) => {
    const newTodos = this.state.todos.map((item) => {
      return { ...item, done: checked };
    });
    this.setState({ todos: newTodos });
  };

  deleteAllTodo = () => {
    let type = this.state.todos.every((item) => {
      return item.done === false;
    });
    if (type) return alert("必须勾选一个事情！");

    if (window.confirm("确认删除已完成吗？")) {
      const newTodos = this.state.todos.filter((item) => {
        return item.done === false;
      });
      this.setState({ todos: newTodos });
    }
  };

  render() {
    const { todos } = this.state;

    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List
            todos={todos}
            changeTodo={this.changeTodo}
            deleteTodo={this.deleteTodo}
          />
          <Footer
            todos={todos}
            checkAllTodo={this.checkAllTodo}
            deleteAllTodo={this.deleteAllTodo}
          />
        </div>
      </div>
    );
  }
}
